<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
  name: "answer",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      topic: '',
      init: {
        language_url: "/zh_CN.js", // 语言包位置，因为放在public下所以可以省略public
        selector: "#tinymce", //tinymce的id
        language: "zh_CN", //语言类型
        skin_url: "/skins/ui/oxide",
        height: 500, //编辑器高度
        browser_spellcheck: true, // 拼写检查
        paste_data_images: true, // 允许粘贴图像
        plugins: "image link code table lists wordcount",
        branding: false, //是否禁用“Powered by TinyMCE”
        toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen", //工具栏
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
      },
      discuss: {
        topicId: '',
        discussContent: '',
      },
    }
  },
  methods: {
    goback() {
      this.$router.back()
    },
    handleClose() {
      this.$api.addDiscuss(this.discuss).then(res => {
        if (res.status_code === 1) {
          this.$message({
            message: '发布成功！',
            type: 'success'
          });
          this.goback();
        }else {

        }
      })
    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.discuss.topicId = id
    this.$api.getTopic({id: id}).then(response => {
      console.log(response);
      this.topic = response.data;
    })
    console.log(id)
  },
}
</script>

<template>
  <div>
    <app-head></app-head>
    <app-body>
      <div>
        <el-button style="margin: 10px 0" @click="goback()">返回</el-button>
        <div class="container">
          <h2>{{ this.topic.topicName }}</h2>
        </div>
        <div>
          <Editor id="tinymce" v-model="discuss.discussContent" :init="init"></Editor>
        </div>
        <el-button type="primary" @click="handleClose">回答</el-button>
      </div>
    </app-body>
    <app-foot></app-foot>
  </div>
</template>

<style scoped>
.container {
  width: 80%;
  margin: auto;
}
</style>